 /*
 * @description: 商品组组件
 * @Author: along
 * @Date: 2020-09-08
 * @Last Modified by: along
 * @Last Modified time: 2020-09-09
 */
<template>
    <div
        class="cate"
        @click="emitEvent(101)"
        :style="{marginBottom: baseconfig.style.mBottom + 'px'}"
    >
        <!-- 商品组数据 -->
        <div v-if="baseconfig.list.length > 0">
            <div
                class="tab"
                v-if="tabList.length > 0"
                :style="{background: baseconfig.style.headerBackgroundColor}"
            >
                <div
                    v-for="(option, i) in tabList"
                    :key="i"
                    class="tab-list"
                    :style="{color: baseconfig.flag == i ? baseconfig.style.headerActiveColor : baseconfig.style.headerColor, background: baseconfig.flag == i ? baseconfig.style.headerActiveBackgroundColor : ''}"
                    @click="baseconfig.flag = i"
                >
                    {{ option }}
                </div>
            </div>
            <div class="cate-wrap">
                <div
                    v-for="(option,index) in baseconfig.list"
                    :key="index"
                    class="wrap-list"
                >
                    <div
                        class="wrap-tab"
                        :style="{background: baseconfig.style.backgroundColor}"
                    >
                        <img
                            :src="baseconfig.style.headerBackgroundImage"
                            class="wrsp-image"
                        >
                        <p
                            class="wrap-title"
                            :style="{color: baseconfig.style.headerColor}"
                        >{{ option.title | filterTitle }}</p>
                    </div>
                    <div
                        class="wrap-shop"
                        :style="{paddingLeft: baseconfig.style.pageMargin / 2 + 'px', paddingRight: baseconfig.style.pageMargin / 2 + 'px', background: baseconfig.style.backgroundColor, paddingBottom: baseconfig.style.goodsMargin / 2 + 'px'}"
                    >
                        <div
                            v-for="(item,i) in option.list"
                            :key="i"
                            :style="{width: (375 - baseconfig.style.pageMargin - baseconfig.style.goodsMargin) / baseconfig.style.columns + 'px', marginRight: baseconfig.style.columns == 2 ? (i % 2 == 0 ? (baseconfig.style.goodsMargin + 'px') : 0) : ((i+1) % 3 == 0 ? 0 : baseconfig.style.goodsMargin / 2 + 'px'), marginTop: baseconfig.style.goodsMargin / 2 + 'px', background: '#FFFFFF', borderRadius: rate, position: 'relative'}"
                            class="wrap-shop-list"
                        >
                            <img
                                v-if="baseconfig.style.goodsTag.show"
                                :src="baseconfig.style.goodsTag.url"
                                :style="{left: baseconfig.style.goodsTag.left / 2 + 'px', top: baseconfig.style.goodsTag.top / 2 + 'px', width: baseconfig.style.goodsTag.width / 2 + 'px', height: baseconfig.style.goodsTag.height / 2 + 'px'}"
                                class="shop-tag"
                            >
                            <img
                                :src="item.goods_cover"
                                class="shop-image"
                                :style="{borderRadius: rate}"
                            >
                            <div class="shop-list-bottom">
                                <p class="shop-title">{{ item.goods_title }}</p>
                                <div class="shop-num">
                                    <p class="shop-num-title">学生价 ¥</p>
                                    <p class="shop-price">{{ item.tuan_price }}</p>
                                </div>
                                <p class="shop-origin">原价<span class="origin-num">¥{{ item.goods_price_origin }}</span></p>
                                <div
                                    v-if="baseconfig.style.goodsButton.show"
                                    class="shop-button"
                                    :style="{background: baseconfig.style.goodsButton.backgroundColor}"
                                >
                                    {{ baseconfig.style.goodsButton.text }}
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 无数据 -->
        <div v-if="baseconfig.list.length == 0">
            <img
                src="@/assets/image/cate-no.png"
                class="cate-none-image"
            >
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'Cate',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        },
        //当前位置id，无需用到
        nowid: {
            type: Number,
            default: () => {}
        }
    },
    watch: {
        //监听商品组数据
        list: {
            handler: function (val, oldVal) {
                this.init();
            },
            deep: true
        },
        //圆角单位转换
        baseconfig:  {
            handler: function (val, oldVal) {
                this.init();

                let rateValue = val.style.goodsBorderRadius;

                this.rate = rateValue.replace(/rpx/g, 'px');
            },
            deep: true
        }
    },
    computed: {
        ...mapState({
            // list: state => state.active.dataList
        })
    },
    filters: {
        filterTitle (val) {
            if(val.length <= 4) return val;
            return val.slice(0,4) + '...';
        }
    },
    data () {
        return {
            tabList: [],//商品分类列表名称
            rate: '0px 0px 0px 0px'
        };
    },
    mounted () {
        this.$nextTick(()=>{
            this.init();
            if(JSON.stringify(this.baseconfig.style) !== '{}') {//回填圆角
                let rateValue = this.baseconfig.style.goodsBorderRadius;

                this.rate = rateValue.replace(/rpx/g, 'px');
            }
        });
        if(this.baseconfig.list == undefined) {
            this.$post('/student/custom_page%5Cget_data_for_app_show', {
                type: 101,
                data_json: JSON.stringify({
                    goods_cate_no: this.baseconfig.data.goods_cate_no,
                    sort: this.baseconfig.data.sort
                })
            }, resp => {
                if(resp.code == 1){
                    this.$set(this.baseconfig, 'list', resp.data.data.category_list);
                }
            });
        }
    },
    methods: {
        /**
         * @description 初始化组件数据
         */
        init () {
            if(this.baseconfig.list.length) {
                this.tabList = this.baseconfig.list.reduce((cur,next) => {
                    cur.push(next.title);
                    return cur;
                },[]);
            }
        },

        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.cate {
    width: 375px;
    box-sizing: border-box;
    border: 1px #ffffff solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    //无数据
    .cate-none-image {
        width: 355px;
        height: 170px;
    }
    //有数据
    .tab {
        width: 375px;
        height: 40px;
        display: flex;
        align-items: center;
        overflow: hidden;
        overflow-x: auto;
        padding: 0 18px;
        box-sizing: border-box;
        cursor: pointer;
        &::-webkit-scrollbar {
            height: 0;
        }
        .tab-list {
            color: #333333;
            padding: 9px 12px;
            white-space: nowrap;
            border-radius: 16px;
        }
    }
    // 商品列表
    .cate-wrap {
        display: flex;
        width: 375px;
        flex-direction: column;
        align-items: center;
        .wrap-tab {
            width: 375px;
            min-height: 40px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            .wrsp-image {
                max-width: 375px;
            }
            .wrap-title {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                color: #333333;
                font-size: 14px;
                font-weight: 500;
            }
        }
        .wrap-shop {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            cursor: pointer;
            .wrap-shop-list {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .shop-list-bottom {
                flex-wrap: wrap;
                display: flex;
                flex-direction: column;
            }
            .shop-tag {
                position: absolute;
                z-index: 20;
            }
            .shop-image {
                width: 100%;
            }
            .shop-title {
                height: 36px;
                overflow : hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #333333;
                font-size: 13px;
                margin-bottom: 8px;
                margin-top: 4px;
                line-height: 18px;
            }
            .shop-num {
                display: flex;
                width: 100%;
                height: 16px;
                align-items: center;
                .shop-num-title {
                    color: #F95B56;
                    font-size: 10px;
                    transform: scale(.9);
                }
                .shop-price {
                    color: #F95B56;
                    font-size: 16px;
                    font-weight: 500;
                }
            }
            .shop-origin {
                height: 12px;
                display: flex;
                align-items: center;
                color: #999999;
                font-size: 12px;
                margin-top: 4px;
                margin-bottom: 8px;
                margin-right: 4px;
                .origin-num {
                    text-decoration: line-through;
                    color: #999999;
                    font-size: 12px;
                }
            }
            .shop-button {
                width: 100%;
                height: 28px;
                text-align: center;
                line-height: 28px;
                color: #ffffff;
                font-size: 12px;
                font-weight: 500;
                border-radius: 16px 16px 0 0;
            }
        }
    }
}
</style>